<template>
    <div class="static_content">
        <el-form ref="form" label-width="100px" label-position="left">
            <el-collapse>
                <template v-for="(data, value) in legendConfig">
                    <el-collapse-item :title="data.title">
                        <div class="collapse_content">
                            <template v-for="(item, index) in data.config">
                                <el-form-item>
                                    <template slot="label">
                                        <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                                            <div class="form_label_length">{{ item.title }}</div>
                                        </el-tooltip>
                                    </template>

                                    <!-- 文本 -->
                                    <div v-if="item.type == 'text'" class="text_style">
                                        {{ item.title || '' }}
                                    </div>
                                    <!-- check复选框 -->
                                    <div class="select_items" v-if="item.type === 'check'">
                                        <el-checkbox-group v-model="form[item.code]">
                                            <el-checkbox v-for="(i, y) in item.data" :key="y" :label="i.value">{{ i.label
                                            }}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <!-- radio单选框 -->
                                    <el-radio-group v-model="form[item.code]"
                                        v-if="item.type === 'radio' || item.type === 'defaultRadio'">
                                        <el-radio :label="i.value" v-for="(i, y) in item.data" :key="y">{{ i.label
                                        }}</el-radio>
                                    </el-radio-group>
                                    <!-- select下拉组件（单） -->
                                    <div class="select_items">
                                        <el-select v-model="form[item.code]" size="small" clearable
                                            v-if="item.type === 'select' || item.type === 'defaultSelect'">
                                            <el-option v-for="(i, y) in item.data" :key="y" :label="i.label"
                                                :value="i.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <!-- select下拉组件（双） -->
                                    <div class="select_items" v-if="item.type === 'selectMultiple'">
                                        <el-select v-model="form[item.code]" size="small" clearable style="width:65%">
                                            <el-option v-for="(i, y) in item.data" :key="y" :label="i.label"
                                                :value="i.value">
                                            </el-option>
                                        </el-select>
                                        <el-select v-model="form[item.code2]" size="small" clearable style="width:35%">
                                            <el-option v-for="(i, y) in item.data2" :key="y" :label="i.label"
                                                :value="i.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <!-- 丰度取值 -->
                                    <div class="select_items top_item abundance_item" v-if="item.type === 'abundance'">
                                        <el-row>
                                            <el-col :span="20">
                                                <div class="abundance_dom">
                                                    <el-input-number v-model="form[item.code]" :min="1"
                                                        :max="Number(item.max) || 100000">
                                                    </el-input-number>
                                                    <div class="abundance_dom_prepend">TOP</div>
                                                </div>
                                            </el-col>
                                            <el-col :span="4">
                                                <el-tooltip class="item" effect="dark" placement="top">
                                                    <div slot="content">{{ item.tooltip }}</div>
                                                    <i class="el-icon-question"
                                                        style="margin-left: 15px;transform: scale(1.5)translateY(-2px);"></i>
                                                </el-tooltip>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <!-- slider滑动组件 -->
                                    <div class="breach_div" v-if="item.type === 'slider'">
                                        <el-tooltip class="item" effect="dark" :content="item.tooltip" placement="top">
                                            <span class="breach_div_icon">
                                                <i class="el-icon-question" v-if="item.tooltip"></i>
                                            </span>
                                        </el-tooltip>
                                        <div class="breach_div_slider">
                                            <el-slider v-model="form[item.code]" :max="Number(item.max)"
                                                :min="Number(item.min)" :step="Number(item.step)"></el-slider>
                                            <!-- :marks="item.marks" -->
                                            <!-- <el-input :disabled="true" class="breach_div_input"
                                                v-model="form[item.code]"></el-input> -->
                                        </div>
                                    </div>
                                    <!-- 颜色选择器（多） -->
                                    <div class="btn_replace" v-if="item.type === 'colorMultiple'">
                                        <mutipleColor :item="item" v-on="$listeners" v-bind="$attrs"
                                            :data="form[item.code + 'colorList#']" :value="form[item.code]"
                                            @changeList="changeList" :config="mutipleColorConfig" />
                                    </div>
                                    <!-- 颜色选择器（单） -->
                                    <div class="colorPicker" @click="pickerOnClick(item.code)"
                                        v-if="item.type == 'color' || item.type == 'defaultColor'">
                                        <el-color-picker v-model.trim="form[item.code]"
                                            :ref="`colorPicker${item.code}`"></el-color-picker>
                                        <div class="title">{{ form[item.code] }}</div>
                                    </div>
                                    <!-- 输入框 -->
                                    <div v-if="item.type === 'input' || item.type === 'defaultTitle'" class="input">
                                        <el-input v-model="form[item.code]" clearable>
                                        </el-input>
                                    </div>
                                    <!-- 开关 -->
                                    <div v-if="item.type === 'switch'" class="input">
                                        <el-switch v-model="form[item.code]" :active-text="item.right"
                                            :inactive-text="item.left">
                                        </el-switch>
                                    </div>
                                    <!-- 字体 -->
                                    <div v-if="item.type === 'defaultSize'" class="weightAndItalic">
                                        <div class="famliy">
                                            <el-select v-model.trim="form[item.code]" filterable>
                                                <el-option v-for="(item, index) in fontOptions" :label="item.label"
                                                    :value="item.value" :key="index"></el-option>
                                            </el-select>
                                        </div>
                                        <div class="size">
                                            <el-select v-model.trim="form[item.code2]">
                                                <el-option v-for="(item, index) in SizeOptions" :label="item" :value="item"
                                                    :key="index"></el-option>
                                            </el-select>
                                        </div>
                                        <el-tooltip class="item" effect="dark" content="加粗" placement="top">
                                            <div class="weight" :class="{ 'select': Boolean(form[item.code3]) }"
                                                @click="changeWeightOrItalic(form[item.code3], item.code3)">
                                                B
                                            </div>
                                        </el-tooltip>

                                        <el-tooltip class="item" effect="dark" content="斜体" placement="top">
                                            <div class="italic" :class="{ 'select': Boolean(form[item.code4]) }"
                                                @click="changeWeightOrItalic(form[item.code4], item.code4)">
                                                I
                                            </div>
                                        </el-tooltip>
                                    </div>
                                    <!-- 字体2 -->
                                    <div v-if="item.type === 'defaultSize2'" class="weightAndItalic">
                                        <div class="famliy">
                                            <el-select v-model.trim="form[item.code]" filterable>
                                                <el-option v-for="(item, index) in fontOptions" :label="item.label"
                                                    :value="item.value" :key="index"></el-option>
                                            </el-select>
                                        </div>
                                        <el-tooltip class="item" effect="dark" content="加粗" placement="top">
                                            <div class="weight" :class="{ 'select': Boolean(form[item.code3]) }"
                                                @click="changeWeightOrItalic(form[item.code3], item.code3)">
                                                B
                                            </div>
                                        </el-tooltip>

                                        <el-tooltip class="item" effect="dark" content="斜体" placement="top">
                                            <div class="italic" :class="{ 'select': Boolean(form[item.code4]) }"
                                                @click="changeWeightOrItalic(form[item.code4], item.code4)">
                                                I
                                            </div>
                                        </el-tooltip>
                                    </div>
                                    <!-- 旋转角度 -->
                                    <div v-if="item.type === 'defaultAngle'" class="input">
                                        <el-select v-model="form[item.code]" size="small" clearable>
                                            <el-option v-for="(i, y) in RotateOptions" :key="y" :label="i" :value="i">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <!-- 颜色选择（双） -->
                                    <div v-if="item.type === 'doubleColor'">
                                        <el-color-picker :value="form[item.code].split(',')[0]"
                                            @change="changedoubleColor($event, item.code, 0)"
                                            style="margin-right: 15px;"></el-color-picker>
                                        <el-color-picker :value="form[item.code].split(',')[1]"
                                            @change="changedoubleColor($event, item.code, 1)"></el-color-picker>
                                    </div>
                                    <!-- 互斥下拉框 -->
                                    <div v-if="item.type === 'mutualExclusion' && form[item.code + item.type + '#'] && form[item.code + item.type + '#'].length"
                                        class="mutualExclusion">
                                        <template v-for="(a, index) in form[item.code]">
                                            <el-select v-model="a.value" size="small" style="width:45%;margin-right:5%;">
                                                <el-option v-for="opt in form[item.code + item.type + '#']" :key="opt.value"
                                                    :label="opt.label" :value="opt.value"
                                                    :disabled="setDisabled(opt, form[item.code])"></el-option>
                                            </el-select>
                                        </template>
                                    </div>
                                    <!-- 图标选择器 -->
                                    <div v-if="item.type === 'iconSelector'" class="select_items icon_select">
                                        <el-select v-model="form[item.code]" placeholder="请选择图标" ref="iconSelector"
                                            collapse-tags>
                                            <template slot="prefix">
                                                <div class="prefix_select">
                                                    <i class="iconfont"
                                                        :class="icon(selectorList, item.data, form[item.code])"
                                                        style="font-size:25px;"></i>
                                                </div>
                                            </template>
                                            <el-option v-for="item in iconList(selectorList, item.data)" :key="item.value"
                                                :label="item.value" :value="item.value">
                                                <i class="iconfont" :class="item.label" style="font-size:25px;"></i>
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                            </template>
                        </div>
                    </el-collapse-item>
                </template>
            </el-collapse>

            <el-button type="primary" class="primary_static_btn" @click="updateDraw" v-if="flag">更新绘图</el-button>
            <el-button class="primary_static_btn" type="info" v-else icon="el-icon-loading">绘图中...</el-button>
        </el-form>
    </div>
</template>

<script>
import { deepClone } from '@/utils';
export default {
    name: 'GenescloudUiIndex',
    props: {
        flag: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            selectorList: this.$publicData('selectorList'),
            fontOptions: this.$publicData('fontFamily'),
            RotateOptions: this.$publicData('rotate'),
            SizeOptions: this.$publicData('fontSize'),
            form: {},
            legendConfig: [],
            colorMultiple: {
                id: 1698979549071,
                code: '8',
                default: 'NPG',
                title: '8',
                type: 'colorMultiple',
                data: [
                    { color: "#ee8172", text: "ASV1" },
                    { color: "#83d0e2", text: "ASV2" },
                    { color: "#4dbdab", text: "ASV3" },
                    { color: "#7788ac", text: "ASV4" },
                    { color: "#f7b9a6", text: "ASV5" },
                    { color: "#a9b2cb", text: "ASV6" },
                    { color: "#b2dfd4", text: "ASV7" },
                    { color: "#e74d4d", text: "ASV8" },
                    { color: "#a5917f", text: "ASV9" },
                    { color: "#cdb9e8", text: "ASV10" },
                    { color: "#ffa58c", text: "ASV11" },
                    { color: "#70a7c2", text: "ASV12" },
                    { color: "#ffc656", text: "ASV13" },
                    { color: "#cc916a", text: "ASV14" },
                    { color: "#deb887", text: "ASV15" },
                    { color: "#fa8072", text: "ASV16" },
                    { color: "#fbb4ae", text: "ASV17" },
                    { color: "#b3cde3", text: "ASV18" },
                    { color: "#ccebc5", text: "ASV19" },
                    { color: "#decbe4", text: "ASV20" }
                ]
            },
            mutipleColorConfig: {
                outline: true
            }
        };
    },
    created() {
        this.$resizeDialog(620, this.dialogWidth)
    },
    beforeDestroy() {
        this.$unResizeDialog()
    },
    watch: {
        '$attrs.option': {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            immediate: true,
            deep: true
        },
    },
    computed: {
        setDisabled() {
            return function (opt, list) {
                // opt为每项option，index为el-select索引
                // 全部已选择
                const selectedArr = list.map(item => item.value)
                // 删除自己的已选
                //   selectedArr.splice(index, 1)
                // 其它的已选，禁用
                return selectedArr.includes(opt.value)
            }
        },
        iconList() {
            return function (list, data) {
                const item = list.filter(i => data.includes(i.value))
                return item
            }
        },
        icon() {
            return function (list, data, value) {
                const item = list.filter(i => data.includes(i.value))
                const i = item.find(a => a.value === value)
                return i ? i.label : null
            }
        }
    },
    methods: {
        init({ legendConfig, chartForm }) {
            this.legendConfig = legendConfig
            this.form = chartForm
        },
        //触发颜色编辑事件
        pickerOnClick(prop) {
            this.$refs[`colorPicker${prop}`][0].handleTrigger()
        },

        updateDraw() {
            this.$emit('updateDraw', this.form);
        },
        changeWeightOrItalic(value, prop) {
            this.form[prop] = value == 0 ? 1 : 0
        },
        //改变颜色（双）
        changedoubleColor(value, prop, num) {
            let arr1 = this.form[prop].split(',')[0]
            let arr2 = this.form[prop].split(',')[1]
            if (num == 0) {
                arr1 = value
            } else {
                arr2 = value
            }
            this.form[prop] = arr1 + ',' + arr2
        },
        changeList(code, value, list) {
            this.form[code] = value
            this.form[code + 'colorList#'] = list
        }
    },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";

//修改折叠面板默认样式
::v-deep .el-collapse .el-collapse-item__header {
    background-color: #fff;
    border: 0;
    height: 70px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    min-width: 120px;
}

::v-deep .el-collapse .el-collapse-item__header::after {
    background-color: #fff;
}

.collapse_content {
    padding: 15px 0 25px 15px;
    overflow-x: auto;

    .form_label_length {
        width: 90px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

.colorPicker {
    position: relative;
    // background-color: red;
    border: 1px solid #ccc;
    // margin: 0 47px 0 11px;
    width: 220px;
    cursor: pointer;
    // z-index: 9999;
    // margin-left: 10px;
    height: 40px;
    border-radius: 6px;
    padding: 2px 0 0 5px;

    ::v-deep .el-color-picker__trigger {
        border: 0;
        height: 35px;
        width: 35px;
    }

    .title {
        position: absolute;
        top: 0;
        left: 50px;
    }
}

.breach_div {
    // margin-bottom: 20px;
    display: flex;
    // background-color: red;
    position: relative;
    width: 90%;

    .breach_div_icon {
        // padding: 0 10px 0 0;
        transform: translateX(-25px);
    }

    .breach_div_slider {
        flex: 1;
    }

    .breach_div_input {
        width: 50px;
        // height: 10px !important;
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);

        ::v-deep .el-input__inner {
            padding: 0 0 0 5px;
            height: 30px;
        }
    }
}

.primary_static_btn {
    // position: absolute;
    // bottom: 0;
    // right: 25px;
    border-radius: 18px;
    margin: 15px 15px 0 0;
    float: right;
}

.select_items {
    ::v-deep .el-input__inner {
        border-radius: 6px;
    }

    &.icon_select {
        ::v-deep .el-input__inner {
            height: 34px;
            line-height: 34px;
        }
    }
}

.input {
    ::v-deep .el-input__inner {
        height: 35px;
        line-height: 35px;
        border-radius: 6px !important;
    }
}





.text_style {
    font-weight: 700;
    font-size: 16px;
    font-family: 'KaiTi';
    transform: translateX(-100px);
    min-width: 90px;
    background-color: #fff;
}

.top_item {
    ::v-deep .el-input__inner {
        border-radius: 0 6px 6px 0;
        height: 35px;
        line-height: 35px;
    }
}

::v-deep .el-input__icon {
    line-height: 40px !important;
}

.weightAndItalic {
    display: flex;
    justify-content: flex-start;

    ::v-deep .el-input__inner {
        height: 35px;
        line-height: 35px;
        border-radius: 6px;
    }

    .famliy {
        width: 200px;
    }

    .size {
        margin-left: 5px;
        width: 120px;
    }
}

.weight,
.italic {
    min-width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    transform: translateY(5px);
    margin-left: 5px;
    cursor: pointer;

    &.select {
        border: 1px solid $themeTopToolColor;
        color: #fff;
        background-color: $themeTopToolColor;
    }
}

.weight {
    font-weight: 700;
}

.italic {
    font-style: italic;
    // transform: translateY(5px);
}

.abundance_item {
    display: flex;
}

.abundance_dom {
    position: relative;

    // background-color: red;
    .abundance_dom_prepend {
        padding: 0 15px;
        height: 36px;
        transform: translateY(1px);
        border-radius: 6px 0 0 6px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #ccc;
        // border: 1px solid #ccc;
    }

    ::v-deep .el-input-number {
        .el-input__inner {
            padding-left: 35px;
            padding-right: 0;
        }

        width: 100%;

        .el-input__inner {
            height: 36px;
            border-radius: 6px;
        }

        .el-input-number__decrease,
        .el-input-number__increase {
            display: none;
        }
    }
}

::v-deep .el-form-item__content {
    min-width: 150px;
}

.prefix_select {
    background: #fff;
    color: #000;
    height: 28px;
    line-height: 32px;
    transform: translateY(5px);
    width: 100px;
    text-align: left;
    padding-left: 12px;
}
</style>